<template>
  <!--   工作信息 -->
  <div style="position: relative">
    <el-row :gutter="24" style="margin: 0">
      <el-col :span="3" class="info_item itemlabel overflow" :title="$t('公司名称')">
        {{ $t('公司名称') }}
      </el-col>
      <el-col :span="5" class="info_item" :title="data.corporateName">
        {{ data.corporateName }}
      </el-col>

      <el-col :span="3" class="info_item itemlabel overflow" :title="$t('行业类型')">
        {{ $t('行业类型') }}
      </el-col>
      <el-col :span="5" class="info_item overflow" :title="data.workingLifeStr">
        {{ data.workingLifeStr }}
      </el-col>
      <el-col :span="8" class="info_item overflow" :title="$t('工作证明及照片')">
        {{ $t('工作证明及照片') }}
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin: 0">
      <el-col :span="3" class="info_item itemlabel overflow" :title="$t('公司电话')">
        {{ $t('公司电话') }}
      </el-col>
      <el-col :span="5" class="info_item overflow" :title="data.workTelephone">
        {{ data.workTelephone }}
      </el-col>

      <el-col :span="3" class="info_item itemlabel  overflow" :title="$t('公司地址')">
        {{ $t('公司地址') }}
      </el-col>
      <el-col :span="5" class="info_item overflow" :title="data.companyDetailedAddress">
        {{ data.companyDetailedAddress }}
      </el-col>

    </el-row>
    <el-row :gutter="24" style="margin: 0">
      <el-col :span="3" class="info_item itemlabel overflow" :title="$t('在职时长')">
        {{ $t('在职时长') }}
      </el-col>
      <el-col :span="5" class="info_item">
        {{ data.entryTime }}
      </el-col>

      <el-col :span="3" class="info_item itemlabel overflow" :title="$t('岗位身份')">
        {{ $t('岗位身份') }}
      </el-col>
      <el-col :span="5" class="info_item overflow">
        {{ data.workTypeStr }}
      </el-col>
    </el-row>

    <el-row :gutter="24" style="margin: 0">
      <el-col :span="3" class="info_item itemlabel overflow">
        {{ $t('发薪日') }}
      </el-col>
      <el-col :span="5" class="info_item" :title="data.payday">
        {{ data.payday }}
      </el-col>

      <el-col :span="3" class="info_item itemlabel overflow"  :title="$t('每月净收入')">
        {{ $t('每月净收入') }}
      </el-col>
      <el-col :span="5" class="info_item" :title="data.monthlyIncome">
        {{ data.monthlyIncome }}
      </el-col>
    </el-row>
    <div class="photo_item">
      <el-image :src="data.proofUrl" :preview-src-list="[data.proofUrl]" style="width: 100%;height: 100%"></el-image>
    </div>
  </div>
</template>

<script>
import {workInfo} from '@/api/order'
export default {
  props: ['routesQuery'],
  name: "workInfo",
  data() {
    return {
      data: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const {userStubId} = this.routesQuery
      const res = await workInfo({
        userStubId: parseInt(userStubId)
      })
      if (res.code === 1) {
        this.data = res.data
      }
    }
  }
}
</script>

<style lang="less" scoped>
.itemlabel {
  background-color: #fffbed;
}

.info_item {
  border-bottom: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  text-align: center;
  overflow: hidden;
  height: 50px;
  line-height: 50px;
}

.photo_item {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 33.1%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 15px;
}
</style>
